<template>
    <el-container>
        <el-aside>
            <el-input type="text" v-model="name" clearable size="small"/>
            <div class="dept_tree">
            <el-tree ref="treeBox" :data="categoryList" :props="defaultProps" @node-click="handleNodeClick" :loading="loading" :highlight-current="true"  :filter-node-method="filterNode"></el-tree>
            </div>
        </el-aside>
        <el-main style="padding-top:8px">
            <top-simple-search @searchFun="searchUser"></top-simple-search>
            <simple-table ref="myTable" v-if="dept_id" api-fun="getUsersByDeptId" :params="{dept_id:dept_id}">
                <el-table-column align="left" prop="alias" label="名称">
                </el-table-column>
                <el-table-column align="left" prop="user_dept_info_list" label="部门" :formatter="deptFormatter" show-tooltip-when-overflow>
                </el-table-column>
<!--                <el-table-column align="left" prop="xzjb" label="职务" :formatter="xzjbFormatter">-->
<!--                    <template slot-scope="{ row }">-->
<!--                        {{ xzjbFormatter(row) }}-->
<!--                        <edit-select-cell-->
<!--                                v-if="showEdit"-->
<!--                                :id="row.id"-->
<!--                                :value="row.xzjb"-->
<!--                                :options="option"-->
<!--                                @change="edit"-->
<!--                        ></edit-select-cell>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column align="left" prop="tel" label="短号" width="120">-->
<!--                    <template slot-scope="{ row }">-->
<!--                        {{row.tel}}-->
<!--                        <edit-cell-->
<!--                                v-if="showEdit"-->
<!--                                :id="row.id"-->
<!--                                :value="row.tel"-->
<!--                                @change="editTel"-->
<!--                                width="300"-->
<!--                                type="String"-->
<!--                        ></edit-cell>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column align="left" prop="phone" label="电话" width="120"/>
                <el-table-column align="center" prop="" label="排序" v-if="showEdit">
                    <template slot-scope="{ row }">
                    <el-button type="text" size="mini" icon="el-icon-top" @click="moveUp(row.id)"></el-button>
                    <el-button type="text" size="mini" icon="el-icon-bottom" @click="moveDown(row.id)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="" label="操作" width="120">
                    <template slot-scope="{ row }">
                        <el-button type="text" size="mini" @click="addGroupDialog(row)" v-has-permi="['mygroup']">加入群组</el-button>
                        <el-button type="text" size="mini" @click="showMessageDialog(row)" icon="el-icon-message"></el-button>
<!--                        <el-button type="text" size="mini" @click="showGroupList(row)">群组列表</el-button>-->
                    </template>
                </el-table-column>
            </simple-table>
            <group-list-dialog :visible.sync="groupVisible" v-if="groupVisible&&groupLoading" :title="groupTitle" :data-list="groupList" :disabled="false" :userRow="currRow" :showSelection="showSelection"></group-list-dialog>
            <msg-detail-dialog  v-if="msgDialogVisible" :visible.sync="msgDialogVisible" :row="currRow" :disabled="false"></msg-detail-dialog>
        </el-main>
    </el-container>
</template>
<script>
    import XEUtils from "xe-utils";
    import addressBook from "@/api/addressBook/index";
    import group from "@/api/addressBook/group/index";
    import EditCell from "../../components/Common/EditCell";
    import EditSelectCell from "../../components/Common/EditSelectCell";
    import GroupListDialog from "./GroupListDialog";
    import MsgDetailDialog from "./MsgDetailDialog";
    import {mapGetters} from "vuex";
    export default {
        name:"AddressBook",
        components: {MsgDetailDialog, GroupListDialog, EditSelectCell, EditCell},
        data() {
            return {
                groupVisible:false,
                loading: false,
                name: "",
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                categoryList: [],
                templateList: [],
                dept_id: undefined,
                visible: false,
                currRow: {},
                option: [{
                    value: 1,
                    label: "科员"
                }, {
                    value: 2,
                    label: "副科级"
                }, {
                    value: 3,
                    label: "正科级"
                }, {
                    value: 4,
                    label: "副处级"
                }, {
                    value: 5,
                    label: "正处级"
                }, {
                    value: 6,
                    label: "副厅级"
                }, {
                    value: 7,
                    label: "正厅级"
                }, {
                    value: 0,
                    label: "未知"
                }],
                groupTitle:"加入群组",
                groupList:[],
                groupLoading:false,
                showSelection:false,
                msgDialogVisible:false,
            }
        },
        watch: {
            name(val) {
                this.$refs.treeBox.filter(val);
            }
        },
      mounted() {
        console.log(this.$refs["myTable"])
      },
      created() {
            this.getCategoryList()
            this.getList()
        },
        computed:{
          ...mapGetters(["userinfo"]),
            myDeptList(){
                return this.userinfo.user_dept
            },
            showEdit(){
                let isCurrDept=false
                for(let i=0; i<this.myDeptList.length; i++){
                    let item = this.myDeptList[i]
                    if(item.id==this.dept_id){
                        isCurrDept = true
                    }
                }
                return (this.hasPermissions('Update')&&isCurrDept)||this.hasPermissions('chuli')
            }
        },
        methods: {
            showMessageDialog(row){
                this.currRow={alias:row.alias,user:[row.username],type:1}
                this.msgDialogVisible = true
            },
            getList(){
                group.getList().then(res=>{
                    this.groupList = res.data.value
                    this.groupLoading = true
                })
            },
            addGroupDialog(row){
                this.currRow = row
                this.showSelection = true
                this.groupVisible=true
                this.groupTitle="加入群组"
            },
            showGroupList(row){
                this.currRow = row
                this.showSelection = false
                this.groupTitle="群组列表"
                this.groupVisible=true
            },
            deptFormatter(row){
                if(row.user_dept_info_list){
                    return row.user_dept_info_list.map(item=>{
                        return item.name
                    }).join("，")
                }
            },
            moveUp(id){
                addressBook.moveUp(id).then(res=>{
                    this.$refs["myTable"].getList({dept_id:this.dept_id});
                    this.msgSuccess(res.msg);
                })
            },
            moveDown(id){
                addressBook.moveDown(id).then(res=>{
                    this.$refs["myTable"].getList({dept_id:this.dept_id});
                    this.msgSuccess(res.msg);
                })
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            showDetailDialog(row){
                this.visible = true
                this.currRow = row
            },
            handleNodeClick(tab, event) {
                this.dept_id = tab.id
                this.getUsersByDeptId({dept_id:this.dept_id,search_value:undefined})
            },
            edit(row) {
                addressBook.editXzjb(row.id, {xzjb: row.value}).then(res => {
                    this.msgSuccess(res.msg);
                    this.getUsersByDeptId({dept_id:this.dept_id,search_value:undefined})
                });
            },
            editTel(row){
                addressBook.editTel(row.id, {tel: row.value}).then(res => {
                    this.msgSuccess(res.msg);
                    this.getUsersByDeptId({dept_id:this.dept_id,search_value:undefined})
                });
            },
            getCategoryList() {
                this.loading = true;
                addressBook.getSimpleDeptList().then(res => {
                        let list =  res.data
                        this.categoryList = list.length<10?list:XEUtils.toArrayTree(list,{strict: true, parentKey: 'parent_dept', key: 'id', children: 'children'});
                        if(this.categoryList.length>0){
                            let deptList = this.myDeptList
                            if(deptList.length>0){
                                this.dept_id = deptList[0].id
                            }else{
                                this.dept_id = this.categoryList[0].id
                            }
                        }
                    this.loading = false;
                }).catch(()=>{
                    this.loading = false;
                });
            },
            getUsersByDeptId(queryData){
                this.$refs["myTable"].searchList(queryData);
            },
            searchUser(queryData){
                if(queryData){
                    this.$refs["myTable"].searchList({search_value:queryData,dept_id:undefined});
                }else{
                    this.getUsersByDeptId({dept_id:this.dept_id,search_value:undefined})
                }
            },
            xzjbFormatter(row){
                switch (row.xzjb) {
                    case 1:
                        return "科员"
                    case 2:
                        return "副科级"
                    case 3:
                        return "正科级"
                    case 4:
                        return "副处级"
                    case 5:
                        return "正处级"
                    case 6:
                        return "副厅级"
                    case 7:
                        return "正厅级"
                    default:
                        return "未知"
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .el-aside {
        border: 1px solid #D3DCE6;
        width: 30%!important;
        max-width: 400px;
    }

    .el-main {
        padding: 0 20px;
        border: 1px solid #D3DCE6;
        border-left: none;
        .icon-list {
            display: flex;
            flex-wrap: wrap;
        }
    }
    aside {
        margin-bottom: 0px;
        background: transparent;
        padding: 0;
        >.el-input{
            width: calc(100% - 40px);
            margin: 8px 20px 10px;
        }
        >.dept_tree{
            height: calc(100vh - 280px);
            overflow-y: scroll;
            padding: 0px 12px 0px 20px;
        }
    }
</style>
